<template>
  <view class="order-list">
    <order-item
      v-for="(item, index) in data"
      :key="item.id"
      :mode="mode"
      :uid="item.id"
      :name="item.user_name"
      :phone="item.user_phone"
      :status="item.status"
      :project="item.skill_name"
      :time="item.date"
      :address="item.user_address"
      :price="item.serve_price"
      @refresh="loadRes"
    />
    <empty v-if="data.length === 0" top="20vh" />
  </view>
</template>

<script>
  import { OrderListApi, TaskListApi } from '@/api/'
  
  export default {
    name:"order-list",
    props: {
      // order-订单，task-任务
      mode: {
        type: String,
        default: 'order'
      }
    },
    data() {
      return {
        data: [],
        page: 1,
        params: {},
      };
    },
    methods: {
      loadRes(reset = true, callback = null, params = {}) {
        this.params = { ...this.params, ...params }
        if (reset) {
          this.page = 1
          this.data = []
        } else {
          this.page += 1
        }
        const api = this.mode === 'order' ? OrderListApi : TaskListApi
        api({ page: this.page, ...this.params }).then((res) => {
          this.$emit('update', res.count)
          const data = res.data || []
          if (data.length === 0 && this.page > 1) {
            this.page --
          }
          data.map(v => {
            v.date = v.date + ' ' + (v?.reservation_time || '')
            return v
          })
          this.data.push(...data)
          typeof callback === 'function' && callback()
        }).catch(() => {
          typeof callback === 'function' && callback()
        })
      },
    }
  }
</script>

<style lang="scss">
.order-list {
  overflow: hidden;
}
</style>